HTML 影片自動播放

在開發網頁時，你可能會想要影片在頁面載入時自動播放。但由於某些瀏覽器政策和使用者體驗的考量，自動播放視頻可能會遇到一些限制。以下是一些建議和技巧，幫助你順利實現影片的自動播放功能。

1. 自動播放基本設定

首先，你必須將影片設定為靜音 (muted)，才能啟用自動播放 (autoplay)。這是因為大多數瀏覽器禁止帶有音效的影片自動播放，以免打擾使用者。

以下是一個基本的HTML範例：

<video controls autoplay muted>
    <source src="/demo.mp4" type="video/mp4" />
    <track kind="captions" src="mydesc.vtt" srcLang="en" />
    <track kind="descriptions" src="mydesc.vtt" srcLang="en" />
</video>

2. IOS 自動播放的注意事項

在 iOS 裝置上（特別是在 Safari 瀏覽器中），你需要加上 playsInline 屬性，以確保影片能夠在頁面中嵌入並自動播放，而不是全螢幕播放。

以下是一個適用於 React 的 JSX 範例：

<video
    ref={videoRef}
    preload="auto"
    autoPlay
    muted
    playsInline
    controls={false}
>
    <source src={videoPath} type="video/mp4" />
</video>

3. 其他解決方案

如果使用上述方法後，影片在某些情境或瀏覽器中仍然無法自動播放，你可以透過 JavaScript 來進行更多的操作。

例如，在 React 中，你可以使用 useEffect 和 useRef：

import { isIOS, isSafari } from "react-device-detect";
const videoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {
    if (videoRef.current === null) return;
    if (isIOS || isSafari) {
        videoRef.current.src = "<yourVideoPath>";
        videoRef.current.load();
    }
}, []);

這段程式碼會檢查目前的瀏覽器是否為 iOS 或 Safari，如果是，則會手動設定影片的 src 並重新加載它，試圖觸發自動播放。